<template>
  <div id="app">
    <div class="_card">
      <el-area-cascader style="width:400px"></el-area-cascader>
    </div>
    <div class="_card">
      <div class="_card-header">
        <div class="_card-label">
          地址解析
        </div>
        <div class="_card-action">
          <el-button :size="size" round @click="save">保存地址</el-button>
          <el-button :size="size" round @click="setDefault">使用默认地址</el-button>
          <el-button :size="size" round @click="$refs.address.clear()">清空</el-button>
        </div>
      </div>
      <el-address-form
        :size="size"
        :data="data"
        ref="address"
        @change="addressChange"
      ></el-address-form>
    </div>
    <div class="_card">
      <el-button :size="size" @click="dialogComponent">组件式弹出层地址编辑</el-button>
      <el-button :size="size" @click="dialog">函数式弹出层地址编辑</el-button>
    </div>
    <div class="_card">
      <p>
        <code>ElAddressDialog</code>默认将<code>data</code>参数解耦，可以通过配置<code>options.bindData = true</code>让对象直接绑定，实现多个弹层间数据各自缓存
      </p>
      <p>
        <el-checkbox v-model="bindData">绑定</el-checkbox>
      </p>
      <el-button :size="size" @click="dialog1">弹出层1</el-button>
      <el-button :size="size" @click="dialog2">弹出层2</el-button>
    </div>
    <div class="_card">
      <div style="margin-bottom: 10px">当前选择：{{ areasLabel }}</div>
      <el-button :size="size" @click="areaDialog">地区选择</el-button>
      <span style="margin:0 10px">地区级数</span>
      <el-input-number v-model="areaLevel" :size="size" :min="1" :max="2"/>
      <el-checkbox v-model="areaDisabled" style="margin-left: 10px">禁用状态</el-checkbox>
    </div>
    <el-address-dialog ref="dialog"></el-address-dialog>
    <el-area-dialog
      ref="area"
      :disabled="areaDisabled"
    />
  </div>
</template>

<script>
  import {ElementAddress} from './main.js';
  import {AREA} from 'element-address';

  /**
   * ElAreaDialog result to Label
   * @return {string}
   */
  function AreasLabel(areas, defaultLabel = '') {
    const ary = [];
    for (const province of areas) {
      if (AREA.province_list[province.code]) {
        if (!province.children || !province.children.length) {
          ary.push(AREA.province_list[province.code]);
        } else {
          for (const city of province.children) {
            if (AREA.city_list[city.code]) {
              ary.push(AREA.city_list[city.code]);
            }
          }
        }
      }
    }
    return ary.length ? ary.join('、') : defaultLabel;
  }

  export default {
    name: 'app',
    components: {},
    computed: {
      areasLabel() {
        return AreasLabel(this.areaValue, '没有选择');
      },
    },
    data() {
      return {
        size: 'small',
        data: {
          name: '',
          mobile: '',
          phone: '',
          code: '',
          details: '',
          company: '',
          zip_code: '',
          province: '',
          city: '',
          area: '',
        },
        testData: {},
        testData1: {},
        testData2: {},
        bindData: true,
        areaValue: [
          {
            code: '320000',     // 选中的省份编码
            children: [],       // children是空数组表示当前省份全部选中
          },
          {
            code: '350000',     // 选中的省份编码
            children: [         // children非空，值是选中的城市编码
              {code: '350100'},
            ],
          },
        ],
        areaDisabled: false,
        areaLevel: 2,
      };
    },
    methods: {
      addressChange(data, attr) {
        // eslint-disable-next-line no-console
        console.log('address-change', data, attr);
      },
      save() {
        this.$refs.address.validate(valid => {
          if (valid) {
            this.$message.success('SUCCESS');
          } else {
            this.$message.error('ERROR');
          }
        });
      },
      setDefault() {
        this.data = {
          name: 'asseek',
          mobile: '15000000000',
          phone: '',
          code: '350181',
          details: '石竹街道 义明综合楼3F',
          company: '',
          zip_code: '',
          province: '福建省',
          city: '福州市',
          area: '福清市',
        };
      },
      dialogComponent() {
        this.$refs.dialog.open({}, {
          beforeResolve: (data, done) => {
            setTimeout(() => {
              done();
            }, 1000);
          },
        }).then(result => {
          this.$alert(JSON.stringify(result, null, 2), {
            title: '结果',
            dangerouslyUseHTMLString: true,
          });
        });
      },
      dialog() {
        ElementAddress.$dialog(this.testData, {
          beforeResolve: (data, done) => {
            setTimeout(() => {
              done();
            }, 1000);
          },
          resetButton: true,
        }).then(result => {
          this.testData = {};
          this.$alert(JSON.stringify(result, null, 2), {
            title: '结果',
            dangerouslyUseHTMLString: true,
          });
        });
      },
      dialog1() {
        ElementAddress.$dialog(this.testData1, {
          bindData: this.bindData,
          resetButton: true,
        }).then(result => {
          this.testData1 = {};
          this.$alert(JSON.stringify(result, null, 2), {
            title: '结果1',
            dangerouslyUseHTMLString: true,
          });
        });
      },
      dialog2() {
        ElementAddress.$dialog(this.testData2, {
          bindData: this.bindData,
          resetButton: true,
        }).then(result => {
          this.testData2 = {};
          this.$alert(JSON.stringify(result, null, 2), {
            title: '结果2',
            dangerouslyUseHTMLString: true,
          });
        });
      },
      areaDialog() {
        this.$refs.area.open(this.areaValue, {level: this.areaLevel}).then(res => {
          this.areaValue = res;
          // eslint-disable-next-line no-console
          console.log(res);
        });
      },
    },
  };
</script>

<style>
  #app {
    padding: 20px;
  }

  ._card {
    max-width: 700px;
    border: 1px solid #e9e9e9;
    padding: 15px;
    margin-bottom: 15px;
    font-size: 14px;
    color: #5e6d82;
    line-height: 1.5em;
  }

  ._card-header {
    display: flex;
  }

  ._card-label {
    flex: 1;
  }

  ._card p {
    margin-bottom: 10px;
  }

  code {
    padding: 2px 4px;
    font-size: 90%;
    color: #c7254e;
    background-color: #f9f2f4;
    border-radius: 4px;
  }
</style>
